<template>
  <div class="all">
    <div class="addmember">
      <h2>添加成员</h2>
      <label
        >请输入成员的邀请码:
        <el-input
          class="input_info"
          v-model="id"
          placeholder="请输入成员邀请码"
          clearable
      /></label>
      <el-row class="mb-4 outerbtn">
        <el-button class="btn btn1" type="primary" @click="send" round
          >邀请</el-button
        >
      </el-row>
      <div v-if="invited" class="t">邀请成功</div>
    </div>
  </div>

  <div v-if="tips" class="mask">
    <div class="dialog">
      <div class="showtips">
        <div>您不是该项目的创建者!!</div>
        <el-button class="tipbtn" type="info" @click="checkright"
          >确 定</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import axios from "axios";
import { useStore } from "vuex";
import router from '../router/index.js'
export default {
  name: "Addmember",
  setup() {
    let id = ref("");
    let tips = ref(false);
    let invited = ref(false)
    const store = useStore();
    onMounted(() => {
      if(store.state.real_Item == ""){
        let data = JSON.parse(sessionStorage.getItem('cloud'))
         store.commit('useSessionStorage',[data.ItemID,data.DemandList,data.ItemList,data.main_person,data.real_Item,data.usernow,data.real_Demand])
      }
      // 如果当然项目创建者不是此人则提示弹窗
      if (store.state.usernow.name != store.state.real_Item.main_person) {
        tips.value = true;
      }
    });

    function send() {
      if (id.value !== "") {
        axios({
          method: "post",
          url: "https://qcjk2s.api.cloudendpoint.cn/addmember",
          data: {
            item_id: store.state.real_Item.Item_ID,
            user_id: id.value.trim(),
          },
        }).then(
          res => {
            if(res.data == -1){
              alert("该成员已存在")              
            }else{
              // console.log(res.data)
              let data = {
                name:res.data.user.name,
                id:res.data.user.id
              }
              store.commit('addRealItemMember',data)
              // console.log(store.state.real_Item)
              invited.value = true
              id.value = ""
              setTimeout(()=>{
                invited.value = false                
              },2000)
            }
          },
          err => {
            alert("请检查邀请码或提交反馈")
            console.log(err.message)
            }
        )
      }else{
        alert("邀请码不能为空")
      }
    }

    function checkright() {
      router.push('/other/personinfo')
    }
    return { id, tips,invited, send, checkright };
  },
};
</script>

<style lang="less" scoped>
.all {
  height: 100%;
  width: 99.9%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #409efc;
  .addmember {
    height: 50%;
    width: 60%;
    h2 {
      margin-bottom: 10%;
      margin-right: 5%;
    }
    label {
      width: 100%;
      height: 10%;
      .input_info {
        width: 50%;
      }
    }
    .outerbtn {
      margin-top: 7%;
    }
    .btn1 {
      margin-left: 30%;
    }
    .btn {
      width: 35%;
    }
    .t{
      margin-top: 3%;
      margin-right: 5%;
      color: red;
    }
  }
}
.mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);

  .dialog {
    width: 300px;
    height: 300px;
    background-color: rgba(145, 145, 145, 0.5);
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .showtips {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: rgb(252, 110, 110);
      font-weight: bold;
      font-size: 20px;
      .tipbtn {
        margin-top: 10%;
      }
    }
  }
}
</style>